<template>
    <div class='faultManagementCon'>
        <div class='hgTableHead'>
            故障管理
        </div>
        <div class='hgTable'>
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                align="center"
                prop="name"
                label="报障人"
                width="140">
                </el-table-column>
                <el-table-column
                align="center"
                prop="time"
                label="保障时间"
                width="150">
                    
                </el-table-column>
                <el-table-column
                align="center"
                width="120"
                prop="supplier"
                label="微应用名称">
                </el-table-column>
                <el-table-column
                prop="typeName"
                align="center"
                width="80"
                label="故障类型">
                     <template slot-scope="scope">
                        <div class="cloPu"  :class="{'cloRed':((scope.row.typeName==='启动失败'))}">{{scope.row.typeName}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                prop="tag"
                align="center"
                label="操作"
                >
                    <template slot-scope="scope">
                        <div class="tagStyle">{{scope.row.tag}}</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>


<script>
export default {
    name: 'HgTable',
    data () {
        return {
            tableData: [{
                name: '**海事局-张文明',
                time: '2020-12-21 09:20',
                supplier:'投票管理',
                typeName:'启动失败',
                tag:'处理'

            }, {
                name: '**海事局-张文明',
                time: '2020-10-17 09:20',
                supplier:'智能客服',
                typeName:'运行太慢',
                tag:'处理'
            }, {
                name: '**海事局-张文明',
                time: '2020-02-21 09:20',
                supplier:'我的收藏',
                typeName:'系统报错',
                tag:'处理'
            }, {
                name: '**海事局-张文明',
                time: '2020-05-01 09:20',
                supplier:'搜索管理',
                typeName:'系统报错',
                tag:'处理'
            }]
        };
    },
    methods: {

    }
};
</script>

<style lang="scss" scoped>
.faultManagementCon{
     .el-table thead{
        color:#333 !important;
        font-weight:400 !important;
    }
    
    .hgTableHead{
        height:40px;
        line-height:40px;
        border-bottom:2px solid #EBEEF5;
        padding-left:20px;
    }
    .hgTable{
        padding:10px;
    }
    .activeRed{color:red}
    .activeBlue{
        color:#fff !important;
        background:#108ee9 !important;
    }
    .tagStyle{
        border:1px solid #eee;
        border-radius:4px;
        width:50px;
        height:30px;
        text-align:center;
        line-height:30px;
        color:#fff;
        background:#108ee9;
    }
    .cloRed{
        color:red !important;
    }
    .cloPu{
        color:rgba(206, 19, 190, 0.8);
    }
}

</style>